<template>
  <div>
    <div class="upload_water_title">
      <div class="fontW-7 font-36 font-f-ib color-yellow text-c">{{$t('uploadWater.title')}}</div>
      <div class="flex-s-between font-f-ib color-yellow fontW-7">
        <div class="font-30 ">{{$t('uploadWater.upload_text')}}</div>
        <div class="font-20 ">{{$t('uploadWater.water_text')}}</div>
      </div>
    </div>
    <div class="border_b_tb_1" style="padding:30px 40px">
      <div class="flex_w_start_s">
        <div v-for="(item, i) in upload_waterData" :key="i" style="margin:0 % " class="imgBox">
          <template class="imgBox">
            <div class="border-r border-1-ff" style="width:100%">
              <img :src="item.img_url" alt="" style="width:100%">
            </div>
            <div>
              <p class="font-f-ib fontW-7 font-20 color-af47 text-c">{{item.address}}</p>
              <p class="font-f-ib fontW-7 font-20 color-af47 text-c">{{item.date}}</p>
            </div>
          </template>
        </div>
        <div class="imgBox border-r border-1-ff imgUpload">
          <upload :width="UploadWidth" :height="uploadHeight" :margin="marginNum" :maxsize="maxsize"  @getImgUrl="getImgUrl"/>
        </div>
      </div>
    </div>
    <div class="fontW-7 font-f-ib color-f font-12 text-c mgtb-10">{{$t('uploadWater.img_text')}}</div>
    <div class="upload_water_title flex">
      <div class="border-3-ff border-r pd-20 flex-1" style="margin-right:13%">
        <div class="border_b-1 mgb-50">
          <p class="fontW-7 font-20 color-9e font-f-ib mgb-20">{{$t('uploadWater.footer_text')}}</p>
        </div>
        <div class="border_b-1 fontW-7 font-20 font-f-ib">
          <p class="color-9e mgtb-10">{{$t('uploadWater.footer_msg')}}</p>
          <p class="color-yellow  mgb-20">{{$t('uploadWater.footer_t')}}</p>
        </div>
        <div class="mgtb-10 fontW-7 font-20 color-a">
          <p>{{$t('watermark.statement')}}:</p>
          <p>{{$t('watermark.Imeetnft')}}</p>
        </div>
      </div>
      <div class="flex-1">
        <div class="fontW-7 color-af47 font-f-ib font-22">{{$t('uploadWater.top_up_preferential_tetle')}}</div>
        <div class="flex mgtb-20">
          <div class="fontW-7 font-20 font-f-ib color-f boxS-i-4 bg-69 border-r text-c flex-1 mgr_13" @click="housBorder(0)" :class="hous_border===0 ? 'border-3 ' : ''">
            <span>{{$t('uploadWater.top_up_preferential[0].value')}}</span><br><span>{{$t('uploadWater.top_up_preferential[0].time')}}</span>
          </div>
          <div class="fontW-7 font-20 font-f-ib color-f boxS-i-4 bg-69 border-r text-c flex-1 mgr_13" @click="housBorder(1)" :class="hous_border===1 ? 'border-3 ' : ''">
            <span>{{$t('uploadWater.top_up_preferential[1].value')}}</span><br><span>{{$t('uploadWater.top_up_preferential[1].time')}}</span>
          </div>
          <div class="fontW-7 font-20 font-f-ib color-f boxS-i-4 bg-69 border-r text-c flex-1 mgr_13" @click="housBorder(2)" :class="hous_border===2 ? 'border-3 ' : ''">
            <span>{{$t('uploadWater.top_up_preferential[2].value')}}</span><br><span>{{$t('uploadWater.top_up_preferential[2].time')}}</span>
          </div>
          <div class="fontW-7 font-20 font-f-ib color-f boxS-i-4 bg-69 border-r text-c flex-1 mgr_13" @click="housBorder(3)" :class="hous_border===3 ? 'border-3 ' : ''">
            <span>{{$t('uploadWater.top_up_preferential[3].value')}}</span><br><span>{{$t('uploadWater.top_up_preferential[3].time')}}</span>
          </div>
        </div>
        <div class="bg-f border-r boxS-i-4 flex-s-between ">
          <div class="fontW-7 font-26 color-0 font-f-ib flex">
            <img src="../../assets/ETH/ETH.svg" alt="" style="width:15%">
            <el-input v-model="input" placeholder="3.2"></el-input>
          </div>
          <div style="width:50%">
            <el-button class="fontW-7 font-25 font-f-ib color-0 bg-yellow border-n" type="primary" style="width:100%">{{$t('uploadWater.top_up_btn')}}</el-button>
          </div>
        </div>
        <div class="flex-s-between">
          <div class="flex-s-between flex-1 mgt-30 fontW-7 font-18 font-f-ib ">
            <div class="color-yellow">{{$t('uploadWater.how_many')}}1316</div>
            <div class="color-f">{{$t('uploadWater.free_many')}}3</div>
          </div>
          <div class="flex-s-between flex-1 opacity-0 fontW-7 font-18 font-f-ib ">
            <div class="color-yellow">{{$t('uploadWater.how_many')}}1316</div>
            <div class="color-f">{{$t('uploadWater.how_many')}}1316</div>
          </div>
        </div>
        <div class="flex-s-between mgtb-10">
          <el-button class="fontW-7 font-25 font-f-ib color-0 bg-yellow border-n flex-1" type="primary">{{$t('uploadWater.water_btn')}}</el-button>
          <el-button class="fontW-7 font-25 font-f-ib color-0 bg-yellow border-n flex-1" type="primary">{{$t('uploadWater.check_emb_btn')}}</el-button>
        </div>
        <div class="fontW-7 font-15 font-f-ib color-f">{{$t('uploadWater.charge_text')}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import Upload from '../../components/component/Upload'
import {upload_waterData} from '../../mock/data'
export default {
  components: { Upload },
  data () {
    return {
      upload_waterData: upload_waterData,
      UploadWidth: 100,
      uploadHeight: 367,
      marginNum: 40,
      maxsize: 100,
      fromMint: '',
      hous_border: null,
      input: ''
    }
  },
  methods: {
    getImgUrl: function (file) {
      console.log(file, ';;;;')
    },
    housBorder: function (type) {
      this.hous_border = type
    }
  }
}
</script>
<style lang="less" scoped>
.upload_water_title{
  width: 90%;
  margin: 20px auto;
}
.mgr_13{
  margin: 0 10px;
  padding: 10px;
}
.imgBox{
  width: 18%;
  margin: 1%;
}
.imgUpload {
  margin:1%;
  height: 260px;
}
@media screen and (max-width: 960px) {
  .imgBox{
    width: 23%;
    margin: 1%;
  }
  .imgUpload {
    height: 265px;
  }
}
@media screen and (min-width: 960px)and (max-width: 1140px) {
  .imgBox{
    width: 23%;
    margin: 1%;
  }
  .imgUpload {
    height: 320px;
  }
}
@media screen and (min-width: 1140px)and (max-width: 1280px) {
  .imgBox{
    // width: 23%;
    margin: 1%;
  }
  .imgUpload {
    height: 360px;
  }
}
@media screen and (min-width: 1280px)and (max-width: 1440px) {
  .imgBox{
    width: 18%;
    margin: 1%;
  }
  .imgUpload {
    height: 285px;
  }
}
@media screen and (min-width: 1440px)and (max-width: 1600px) {
  .imgBox{
    width: 18%;
    margin: 1%;
  }
  .imgUpload {
    height: 320px;
  }
}
@media screen and (min-width: 1600px) {
  .imgUpload {
    height: 435px;
  }
}
.el-button--primary:focus, .el-button--primary:hover {
  background: #FFD500;
}
/deep/.el-input__inner{
  background: none;
  border:none;
  margin-top: 5px;
}
</style>
